<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图学习实例</title>
    <!--加载-->
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=LXUjqYwEANG4k7ENttGPunwQUSMmSpnC" type="text/javascript"></script>
    <style>
        html {
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
    var map = new BMap.Map("container");// 创建地图实例
//    var point = new BMap.Point(116.404,39.915);
//    var point = new BMap.Point(113.97112083444881,22.53770050367634);
    var point = new BMap.Point(113.758652, 34.734857);  // 创建点坐标
    map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别
    //添加控件


    //地图缩放平移
    map.addControl(new BMap.NavigationControl());
    //缩放地图控件
    map.addControl(new BMap.OverviewMapControl());
    //比例尺控件
    map.addControl(new BMap.ScaleControl());
    //地图版本
//    map.addControl(new BMap.CopyrightControl());
    //定位
//    map.addControl(new Bmap.GeolocationControl());
    // 三维 卫星
    map.addControl(new BMap.MapTypeControl());
    map.setCurrentCity("郑州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

//    第一步

    // 定义一个控件类，即function
    function ZoomControl(){
        // 设置默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(50, 50);
    }
    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();

//第二步，给这个控件类中添加initalize方法，声明下这个控件的样式和行为
    // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
        var div = document.createElement("div");
// 添加文字说明
        div.appendChild(document.createTextNode("放大2级"));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.border = "1px solid gray";
        div.style.backgroundColor = "white";
        // 绑定事件，点击一次放大两级
        div.onclick = function(e){
            map.zoomTo(map.getZoom() + 2);
        };
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    };
//    3.最后一步，实例化这个控件类，并且通过addControl方法添加到地图上去
//    添加自定义控件与添加其他控件方法一致，调用map.addControl()方法即可。


    // 创建控件实例
    var myZoomCtrl = new ZoomControl();
    map.addControl(myZoomCtrl);
    //添加标注
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    //给标注添加双击click事件
    marker.addEventListener('click', function (e) {
        alert('我被双击了')
    })
//让标注变得可以拖拽
    marker.enableDragging();
    //拖拽的时候可以响应DRAGEND事件
    marker.addEventListener('dragend',function(e){
       alert('当前位置'+ '经度' + e.point.lng + ',' + e.point.lat)
    })

    //添加信息窗口
    //这里，这个窗口有个最小值，请大家注意，宽250， 高100，
    var opts = {
        width : 250,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title : "你好"  // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

    //添加折线
    var polyline = new BMap.Polyline([
                new BMap.Point(113.758652, 34.734857),
                new BMap.Point(113.727894,34.732751)
            ],
            {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}
    );
    map.addOverlay(polyline);

//    //1.自定义覆盖物类创建，这个类是继承overlay类的
//    // 定义自定义覆盖物的构造函数
//    function SquareOverlay(center, length, color){
//        this._center = center;
//        this._length = length;
//        this._color = color;
//    }
//    // 继承API的BMap.Overlay
//    SquareOverlay.prototype = new BMap.Overlay();
//
//    //2、给这个类添加initalize方法，初始化这个自定义的覆盖物
//    // 实现初始化方法
//    SquareOverlay.prototype.initialize = function(map){
//// 保存map对象实例
//        this._map = map;
//        // 创建div元素，作为自定义覆盖物的容器
//        var div = document.createElement("div");
//        div.style.position = "absolute";
//        // 可以根据参数设置元素外观
//        div.style.width = this._length + "px";
//        div.style.height = this._length + "px";
//        div.style.background = this._color;
//// 将div添加到覆盖物容器中
//        map.getPanes().markerPane.appendChild(div);
//// 保存div实例
//        this._div = div;
//// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
//// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
//        return div;
//    }
//    //3. 实现绘制方法
//    SquareOverlay.prototype.draw = function(){
//// 根据地理坐标转换为像素坐标，并设置给容器
//        var position = this._map.pointToOverlayPixel(this._center);
//        this._div.style.left = position.x - this._length / 2 + "px";
//        this._div.style.top = position.y - this._length / 2 + "px";
//    }
//    //4.直接添加覆盖物
// // 添加自定义覆盖物
//    var mySquare = new SquareOverlay(map.getCenter(), 100, "red");
//    map.addOverlay(mySquare);




    map.addEventListener('click', function (e) {
        var point = new BMap.Point(e.point.lng , e.point.lat);
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
    })
    map.addEventListener("click",marker);
</script>